<template>
  <div>
    <div class="title"><image src="/static/back.svg" class="back" mode="widthFix" /></div>
    <div class="author_top">
      <image src="/static/Ellipse.jpg" class="author_topimg" mode="widthFix" />
      <div class="author_topname"><span>作者</span><i></i><p>魏紫钰</p></div>
      <div class="author_topmain">这里是作者简介这里是作者简介这里是作者简介这里是作者简介这里是作者简介</div>
      <div class="author_topf" @click="clickOne" @longpress="clickLong" @touchstart="touchStart" @touchend="touchEnd">
      <!-- 默认 -->
      <image src="/static/defulat.jpg" mode="widthFix" id="defulat"   v-if="showdefulat"/>
      <!-- 第一次喜欢 -->
      <image src="/static/oneClick.gif" mode="widthFix" id="oneClick"   v-if="showoneClick"/>
      <!-- 第二次喜欢 -->
      <image :src="moreClicksrc" mode="widthFix"  id="moreClick" v-if="showmoreClick"/>
      <!-- 长按 -->
      <image :src="showchang01src" mode="widthFix"  id="chang01" v-if="showchang01"/>
      <image src="/static/chang02.gif" mode="widthFix"  id="chang02" v-if="showchang02"/>
      <image :src="showchang03src" mode="widthFix"  id="chang03" v-if="showchang03"/>喜欢作者</div>
    </div>

    <div class="author_title">
      <span>全部文章</span>
      <i></i>
    </div>

    <div class="box">
      <div class="box_top">报道 | 人物志<span>09 otc.2018</span><p>李兰迪: 演员未满 </p><i></i></div>
      <div class="box_main">
        <p>穿着深蓝色制服上衣与红色格子裙，北京师大附中 2018 届高三学生李兰迪毕业了。很快，这场毕业典礼登上微博热门话题榜。</p>
        <image src="/static/Rectangle2.jpg" mode="widthFix" />
      </div>
    </div>

    <div class="box">
      <div class="box_top">报道 | 人物志<span>09 otc.2018</span><p>李兰迪: 演员未满 </p><i></i></div>
      <div class="box_main">
        <p>穿着深蓝色制服上衣与红色格子裙，北京师大附中 2018 届高三学生李兰迪毕业了。很快，这场毕业典礼登上微博热门话题榜。</p>
        <image src="/static/Rectangle2.jpg" mode="widthFix" />
      </div>
    </div>

    <div class="box_more">以上为作者全部文章</div>

    <div class="author_title">
      <span>留言板</span>
      <i></i>
    </div>

    <div class="message">
      <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰</p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
      </div>

        <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰<i>作者回复</i></p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
        <div class="message_boxf">@张紫菜：这里是文章评论这里是文章评论这里是文章评论这里是文章评论</div>
      </div>

      <div class="message_box">
        <image src="/static/Rectangle 7.jpg" class="message_boximg" mode="widthFix" />
        <div class="message_boxr">
          <p>魏紫钰</p>
          <em>3小时前</em>
          <span>这里是文章评论这里是文章评论这里是文章评论这里是文章评论</span>
        </div>
      </div>
    </div>

    <div class="footer">
      <input type="text" placeholder="给作者留言...">
      <div class="fr"><image src="/static/ic_comment.svg" mode="widthFix" /><i>17</i></div>
    </div>

  </div>
</template>

<script>
export default {
  data () {
      return {
                one: true,
                chang: false,
                duan: false,
                moreClicksrc: "",
                showchang01src: "",
                showchang03src: "",
                showdefulat: true,
                showoneClick: false,
                showmoreClick: false,
                showchang01: false,
                showchang02: false,
                showchang03: false
            }
  },




  methods: {

      clickOne(e) {
				 if(this.one){
          this.one = false;
          this.showdefulat = false;
          this.showchang03 = false;
          this.showoneClick = true;
          console.log("第一次喜欢");
        }else{
          this.showoneClick = false;
          this.showdefulat = false;
          this.showchang01 = false;
          this.showchang02 = false;
          this.showchang03 = false;
          this.moreClicksrc = "/static/moreClick.gif?"+Math.random();
          this.showmoreClick = true;
          console.log("第二次喜欢");
        }
        console.log("点击");   
      },
      

			clickLong(e) {
        console.log("长按");
        this.chang = true;
        this.one = false;
        this.showoneClick = false;
        this.showdefulat = false;
        this.showmoreClick = false;
        this.showchang02 = false;
        this.showchang03 = false;
        this.showchang01 = true;
        this.showchang01src = "/static/chang01.gif?"+Math.random();
        this.duan = true;
        var that = this;
        if(that.duan){
          setTimeout(function () {
            that.showchang01 = false;
            that.showoneClick = false;
            that.showdefulat = false;
            that.showmoreClick = false;
            that.showchang03 = false;
            that.showchang02 = true;
            console.log("----Countdown----");
          }, 1250);
        }
      },

      touchStart: function() {
        console.log('touchStart....');
      },


      touchEnd: function() {
          console.log('touchEnd....');
          if(this.chang == true){
            this.showchang02 = false;
            this.showchang01 = false;
            this.showoneClick = false;
            this.showdefulat = false;
            this.showmoreClick = false;
            this.showchang03 = true;
            this.showchang03src = "/static/chang03.gif?"+Math.random();
            this.duan = true;
          }
          console.log(this.chang);
          this.chang = false;
      },

   
  
  },



}

// export default {
//   data () {
//   },

//   methods: {
    // var a = 0;

    // function btlick(){
    //     if(a == 0){
    //         document.getElementById("defulat").style.display="none";
    //         document.getElementById("oneClick").style.display="block";
    //         console.log("第一次喜欢");
    //         a = 1;
    //     }else{
    //         document.getElementById("oneClick").style.display="none";
    //         document.getElementById('moreClick').src = "moreClick.gif";
    //         document.getElementById("moreClick").style.display="block";
    //         console.log("第二次喜欢");
    //         a = 1;
    //     }
    // }


    //       // 长按 点击判断
    //   var timeOutEvent=0;
    //   $(function(){
    //       $("#moreClick,#chang03").on({
    //           touchstart: function(e){
    //               timeOutEvent = setTimeout("longPress()",500);
    //               e.preventDefault();
    //           },
    //           touchmove: function(){
    //                       clearTimeout(timeOutEvent); 
    //                   timeOutEvent = 0; 
    //           },
    //           touchend: function(){
    //               clearTimeout(timeOutEvent);
    //               if(timeOutEvent!=0){ 
    //                   document.getElementById("oneClick").style.display="none";
    //                   document.getElementById("chang03").style.display="none";
    //                   document.getElementById('moreClick').src = "moreClick.gif";
    //                   document.getElementById("moreClick").style.display="block";
    //                   console.log("你这是点击，不是长按"); 
    //               } 
    //               return false; 
    //           }
    //       })
    //   });



    //   function longPress(){ 
    //       timeOutEvent = 0; 
    //       console.log("长按事件触发发");
    //       document.getElementById("moreClick").style.display="none";
    //       document.getElementById("chang01").style.display="block";
    //       setTimeout(function(){
    //           document.getElementById("chang01").style.display="none";
    //           document.getElementById("chang02").style.display="block";
    //       },1250);
    //   } 

    //   $("#chang01").mouseout(function(){
    //           document.getElementById("chang02").style.display="none";
    //           document.getElementById("chang03").style.display="block";
    //   });


//   }
// }
</script>

<style>
.title{ width: 100%;height: 44px;position:fixed;top:0px;left:0;background:#ffffff;z-index: 9;padding:20px 0 0;}
.back{display: block;margin: 10px 0 0 20px;width:24px;height: 24px;float: left;}
.logo{ width: 94px;height:auto; display: block; float:left;margin:10px 95px 0; }

.author_top{ width: 327px;height:auto; display: block; float:left;margin:134px 23px 8px; border:1px solid rgba(0, 0, 0, 0.15); border-top:6px solid #000000; font-size: 12px; }
.author_topf{ width: 96px; height: 32px; line-height: 32px; float: left; border:1px solid #ED474E; margin: 25px 114.5px 23px; font-size: 12px; color: #ED474E; text-align: center;}
.author_topf image{ width: 30px; height: 30px; display:inline-block; margin: 1px ; float:left;}
.author_topf.active{background: #ED474E; color: #ffffff;}
.author_topimg{ width: 88px; height: 88px; border-radius: 88px; display: block; float:left; margin: -42px 119.5px 0; }
.author_topname{width: 100%;height:auto; display: block; float:left;margin:15px 0 8px;}
.author_topname span{width: 24px;height:auto; display: block; float:left;margin:10px 0 0 20px; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4);}
.author_topname i{width: 58px;height:1px; display: block; float:left;margin:20px 0 0 10px;  background: rgba(0,0,0,.1);}
.author_topname p{width: auto;height:auto; display: block; float:left;margin:0 0 0 10px; font-size: 30px; line-height: 43px; color: rgba(0,0,0,1);Font-Family: Source Han Serif}
.author_topmain{width: 291px;height:auto; display: block; float:left;margin:10px 20px 10px; font-size: 14px; line-height: 20px; color: rgba(0,0,0,.4);}
.author_title{width: 327px;height:20px; display: block; float:left;margin:24px 24px 0; position:relative; }
.author_title span{width: auto;height:20px; display: block; float:left;font-size: 14px; line-height: 24px; background: #ffffff; padding: 0 5px 0 0; color: rgba(0,0,0,.4);  position:absolute; z-index: 2; top: 0px;left: 0px}
.author_title i{width: 100%;height:1px; display: block; float:left; border-bottom: 1px solid rgba(0, 0, 0, 0.4); position:absolute;top: 10px;left: 0; z-index: 1;}
.box{width: 327px;height:auto; display: block; float:left;margin:22px 24px 10px; }
.box_top{width: 100%;height:auto; display: block; float:left;margin:0 0 16px; font-size: 12px; color: rgba(0,0,0,.6); line-height: 17px;}
.box_top span{width: auto;height:auto; display: block; float:right;}
.box_top p{width: 100%;height:auto; display: block; float:left; font-size: 24px; line-height: 34px; color: #000000; margin: 10px 0 0;}
.box_top i{width:15px;height:2px; display: block; float:left; background: #F62525; margin: 10px 0 0;}
.box_main{width: 100%;height:auto; display: block; float:left;margin:5px 0 16px; }
.box_main p{width: 100%;height:auto; display: block; float:left; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4); margin: 5px 0 15px;}
.box_main image{width: 100%;height:auto; display: block; float:left; margin: 5px 0;}
.box_more{width: 100%;height:auto; display: block; float:left; font-size: 12px; line-height: 17px; color: rgba(0,0,0,.4); margin: 0px 0 15px;}
.message{width: 327px;height:auto; display: block; float:left;margin:0 23px ;}
.message_box{width: 100%;height:auto; display: block; float:left;margin:10px 0 20px;}
.message_boximg{ width: 42px; height: 42px; display: block; float: left; border-radius: 42px;}
.message_boxr{ width: 271px; height: auto; display: block; float: right;}
.message_boxr p{width: 100%;height:auto; display: block; float:left; font-size: 13px; line-height: 18px; color: rgba(0,0,0,.4);}
.message_boxr p i{width: auto;height:15px; padding: 0 3px; background: #222222; display:inline-block;  font-size: 10px; line-height: 15px; color: #FFFFFF; margin-left: 5px;}
.message_boxr em{width: 100%;height:auto; display: block; float:left; font-size: 10px; line-height: 14px; color: rgba(0,0,0,.4);}
.message_boxr span{width: 100%;height:auto; display: block; float:left; font-size: 15px; line-height: 22px; color: rgba(0,0,0,.65);margin: 5px 0 0;}
.message_boxf{padding: 12px; font-size: 12px; line-height: 18px;color: rgba(0,0,0,.4); border: 1px solid rgba(0,0,0,.1);width: 247px; height: auto;margin: 10px 0 0; display: block;float: right;}
.footer{width: 327px;height:48px; background: #ffffff; display: block; float:left;padding:0 23px; margin: 10px 0 0;}
.footer input{width: 279px;height:24px; display: block; float:left; border-bottom: 1px solid #000000; line-height: 24px; margin: 5px 0 0 0; font-size: 12px;}
.fr{width: 30px;height:30px; display: block; float:right;  margin: 5px 0 0 0; position:relative; }
.fr image{width: 24px;height:24px; display: block; float:left;  margin: 5px 0 0 0; }
.footer i{width: auto;height:10px; display: block; float:left; background: #DB3131; color: #ffffff;padding: 2px 3px; line-height: 10px; margin: 5px 0 0 0; font-size: 10px;position: absolute; top: -5px;right: 0px; z-index: 9;border-radius: 10px;}
.author_topf image.icohide{display: none}
</style>